<template>
  <div
    :class="classNames"
    :style="
      `left: ${location.left};right: ${location.right};top: ${location.top};bottom:${location.bottom};display:inline-block;position:fixed;z-index: 1;`
    "
    @mousedown.stop="mouseDownF"
    @mouseup.stop="mouseUpF"
    @click.stop
  > 
    
    <div style="display:flex;">
      <div v-if="bearing=='2'&&!show" class="panel-cont">
        
      </div>

      <div class="panel-cont" v-if="show" :style="`width:${contentW}`">
        <!-- title -->
        <div class="title-head"  style="cursor: pointer;">
          
          <span :title="name?name:'' " style="padding-right:10px;">{{name?name:'' }}</span>
          <i style="cursor: pointer;" :class="name=='图层'?'el-icon-back':'el-icon-close'" @click.stop="closeBox"></i>
        </div>
        <div class="panel-slot">
          <slot />
        </div>
      </div>

      <div @click="changeShow" v-if="bearing=='1'&&!show" class="panel-show ">
        <i :class="arrow"></i>
        {{name}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AttrTableBox',
  props: {
    bottom: {
      type: String
    },
    right: {
      type: String
    },
    top: {
      type: String
    },
    left: {
      type: String
    },
    name: {
      type: String
    },
    bearing: {
      type: String,
      required: true
    },
    classNames: {
      type: String,
      required: true
    },
    compare: {
      type: Boolean
    },
    zoneNames: {
      type: String
    },
    showBox: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    location: {
      left: null,
      right: null,
      top: null,
      bottom: null
    },
    show: false,
    contentW: 'auto',
    isMove: false,
    startY: 0,
    originalX: 0,
    originalY: 0,
    startTime: 0,
    endTime: 0,
  }),
  computed: {
    arrow() {
      return this.right
        ? this.show
          ? 'el-icon-right'
          : 'el-icon-back'
        : this.show
        ? 'el-icon-back'
        : 'el-icon-right'
    }
  },
  created() {
    this.location = {
      left: this.left === undefined ? undefined : parseInt(this.left) + 'px',
      right: this.right === undefined ? undefined :parseInt(this.right) + 'px',
      top: this.top,
      bottom: this.bottom
    }
    // console.log(this.showBox);
    if( this.showBox ) {
      this.show = true;
    }
    
    this.bindMouseMoveToBody();
  },
  watch: {
    compare: {
      handler() {
        // 打开竞对分析 需关闭数据面板
        if (this.compare) {
          this.show = false
          if (this.bearing == '1') {
            this.location.left = '70px'
          } else {
            this.location.right = '0px'
          }
        }

      },
      deep: true
    },
    top(nv) {
      this.location.top = nv;
      this.location.left = '70px';
    },
    'location.left'(nv) {
      if( parseInt(nv) < 70 ) {
        this.location.left = '70px';
      }
    },
    right(nv) {
      this.location.right = '0px';
    },
    isMove(nv) {
      // console.log(nv);
      this.$emit('moving', nv)
    }
  },
  methods: {
    changeShow() {
      console.log('展开-关闭：', this.endTime)
      // 大于50毫秒判定为 拖拽
      if (this.endTime > 50) {
        this.endTime = 0
      } else {
        // 关闭按钮前 需要判断位置不能超过界
        console.log(this.location.left, this.location.top, this.location.right);
        if(this.show ) {
          if( this.location.left != undefined && this.location.left.indexOf('-') !== -1 ) {
            this.location.left = '70px';
          }
          if( this.location.right != undefined && this.location.right.indexOf('-') !== -1 ) {
            this.location.right = '0px';
          }
        }
        this.show = !this.show
        this.contentW = this.show ? 'auto' : 0

      }
      console.log(this.$parent.form)
      this.$store.dispatch('gis/changeForm', {
        word: null,
        type: '',
        form: this.$parent.form,
        value: ''
      })
    },
    mouseDownF(e) {
      console.log('mouseDownF：', this.endTime)
      this.startTime = new Date().getTime()
      e.preventDefault()
      let plateBox = document.getElementsByClassName(this.classNames)[0]
      this.isMove = true
      this.startX = e.clientX
      this.startY = e.clientY
      this.originalX = plateBox.offsetLeft
      this.originalY = plateBox.offsetTop
      const that = this
      // plateBox.onmousemove = function(ev) {
      //   that.mouseMoveF(ev)
      // }
    },
    mouseMoveF(e) {
      // console.log('mouseMoveF：', this.endTime)
      e.preventDefault()
      if (this.isMove) {
        const body = document.body
        let plateBox = document.getElementsByClassName(this.classNames)[0]
        let x = e.clientX - (this.startX - this.originalX)
        const y = e.clientY - (this.startY - this.originalY)
        this.location.top = y + 'px'
        if (this.bearing == '1') {
          this.location.left = x + 'px'
        } else {
          const r = body.clientWidth - x - plateBox.clientWidth
          this.location.right = r + 'px'
        }
        this.endTime =  new Date().getTime() - this.startTime
      }
    },
    mouseUpF() {
      console.log('mouseUpF：', this.endTime)
      const plateBox = document.getElementsByClassName(this.classNames)[0]
      this.isMove = false
      // this.endTime = 0
      plateBox.onmousemove = null
    },
    bindMouseMoveToBody () {
      document.body.addEventListener('mousemove', (e) => {
        if (this.isMove) {
          this.mouseMoveF(e);
        }
      });
    },
    closeBox() {
      this.$emit('close')
    }
  },
  beforeDestroy() {
   
  }
}

</script>

<style  lang="scss" scoped>
.panel-show {
  background: #4b71b0;
  box-shadow: 0px 0px 12px 0px rgba(6, 14, 33, 0.16);
  font-size: 16px;
  color: #fff;
  padding: 10px;
  cursor: pointer;

  word-break: break-all;
  text-align: center;
  
}
// .panel-l {
//   border-radius: 0px 10px 10px 0px;
// }
// .panel-r {
//   border-radius: 10px 0px 0px 10px;
// }
.panel-cont {
  background: #4b71b0;
  box-shadow: 0px 0px 12px 0px rgba(6, 14, 33, 0.16);
  border-radius: 2px;
}
.title-head {
  color: #fff;
  display: flex;
  padding: 8px 10px;
  /* justify-content: space-between; */
  align-items: center;
  font-size: 14px;

  position: relative;
  justify-content: flex-end;
  > span {
    position: absolute;
    left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc( 100% - 54px );
  }

  > i {
    width: 30px;
    font-size: 15px;
    height: 100%;
    padding-left: 10px;

  }

}
.panel-slot {
  background: #fff;
  margin: 3px;
  box-shadow: 0px 0px 12px 0px rgba(6, 14, 33, 0.16);
  border-radius: 2px;
}


</style>

